<script setup>
	import { onLoad, onPageScroll, onTabItemTap, onShareAppMessage } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import { useUserStore } from '@/store/user'
	import { checkPermi } from '@/utils/permission'
	
	const config = getApp().globalData.config
	const user = useUserStore()
	const statusHeight = ref(0)
	const menuHeight = ref(32)
	const menuWidth = ref(0)
	const contHeight = ref(66)
	const headOpacity = ref(0)
	const loading = ref(false)
	const tipPopup = ref(null)
	const navFunc = [
		{
			title: '销售',
			children: [
				{name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-08/1757331393330_salesReturn.png',
					title: "销售订单", route: '/pages/work/salesOrder', perms: "salesmanagement:saleorder:list" },
				{name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-08/1757331405844_salesOrder.png',
					title: "销售退货单", route: '', perms: "salesmanagement:returngoods:list" },
			]
		},
		{
			title: '采购',
			children: [
				{name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-08/1757331652303_purchaseReturn.png',
					title: "采购下单", route: '/pages/work/purchaseOrder', perms: "procurementManage:placePurchaseOrder:list" },
				{name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-08/1757331655609_purchaseorder.png',
					title: "采购退货单", route: '', perms: "procurementManage:cgsaleorder:list" }
			]
		},
		{
			title: '库存管理',
			children: [
				{name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-09/1757419369159_sorting.png',
					title: "订单分拣", route: '/pages/work/inventorySorting', perms: "warehouse:orderSort:list" },
				{name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-08/1757333298453_management.png',
					title: "验收管理", route: '', perms: "warehouse:acceptance:list" },
				{name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-08/1757333303597_inventory.png',
					title: "出库单", route: '', perms: "warehouse:record:list" },
				{name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-08/1757333309064_delivery.png',
					title: "盘点", route: '', perms: "warehouse:inventory:list" },
				{name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-08/1757333305902_Inquiry.png',
					title: "库存查询", route: '', perms: "warehouse:manage:list" }
			]
		}
	]
	const navList = computed(() => {
		const newFunc = uni.$uv.deepClone(navFunc)
		newFunc.forEach(nav => {
			nav.children = nav.children.filter(item => checkPermi(user.permissions, [item.perms]))
		})
		return newFunc.filter(nav => nav.children.length)
	})
	
	function init() {
		
	}
	function openPage(url) {
		if(url) uni.navigateTo({url})
		else {
			// uni.showToast({icon: 'none',title: '敬请期待！'})
			tipPopup.value.open()
		}
	}
	function closeTip() {
		tipPopup.value.close()
	}
	function scanQrcode() {
		uni.scanCode({
			scanType: ['qrCode'],
			success: (res) => {
				console.log(res, 'scanQrcode')
			}
		})
	}
	
	onLoad(() => {
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		statusHeight.value = menuButtonInfo.top
		menuHeight.value = menuButtonInfo.height
		menuWidth.value = menuButtonInfo.left
		contHeight.value = menuButtonInfo.bottom + 10
		// #endif
		init()
	})
	onTabItemTap((e) => {
		if(e.index === 0 && e.text === '回顶部') {
			uni.startPullDownRefresh()
		}
	})
	onPageScroll((e) => {
		headOpacity.value = e.scrollTop > 120 ? 1 : e.scrollTop / 120
		if(e.scrollTop > 400) {
			uni.setTabBarItem({
				index: 0,
				text: '回顶部',
				selectedIconPath: 'static/images/tabbar/back.png'
			})
		} else {
			uni.setTabBarItem({
				index: 0,
				text: '首页',
				selectedIconPath: 'static/images/tabbar/home_.png'
			})
		}
	})
	onShareAppMessage(() => {
		return {
			title: config.appInfo.name,
			path: '/pages/tabbar/index',
			imageUrl: config.appInfo.logo
		}
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head" :style="{backgroundColor: 'rgba(254, 109, 93, ' + headOpacity.toFixed(1) + ')', height: contHeight + 'px'}">
			<view :style="{ height: statusHeight + 'px' }"></view>
			<view class="head-box" :style="{height: menuHeight + 'px',width: menuWidth? menuWidth + 'px' : '100%'}">
				<uv-icon name="scan" color="#FFFFFF" :size="menuHeight + 'px'" @click="scanQrcode" />
				<view class="search-box theme-btn" @click="search">
					<uv-icon name="search" color="#5B5B5B" size="40" />
					<input type="text" placeholder="搜索商品库存、商品名称" disabled class='input-text' />
				</view>
			</view>
		</view>
		<view class="app-content">
			<image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-08/1757328252588_home.png" class="home-image"
				mode="aspectFill"></image>
			<view class="content-nav">
				<view class="nav-box" v-for="(item, index) in navList" :key="index">
					<view class="nav-title">{{item.title}}</view>
					<view class="nav-list">
						<view class="nav-item" v-for="nav in item.children" :key="nav.id" @click="openPage(nav.route)">
							<uv-image :src="nav.name" width="88" height="88" radius="16"></uv-image>
							<text>{{nav.title}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uv-popup ref="tipPopup" mode="center" round="32" :safeAreaInsetBottom="false">
			<view class="popup-box">
				<view class="popup-content">
					<image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-10/1757467378944_image.png" class="icon"
						mode="aspectFill" />
					<text>功能暂未开发，敬请期待</text>
				</view>
				<view class="popup-bottom">
					<uv-button type="primary" shape="circle" text="我知道了" @click="closeTip"></uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		.app-head {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			z-index: 10;
			padding-bottom: 10px;
			.head-box {
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				gap: 24rpx;
				.search-box{
					flex: 1;
					height: 100%;
					padding: 12rpx;
					display: flex;
					align-items: center;
					gap: 6rpx;
					background-color: #FFFFFF;
					border-radius: 72rpx;
					.input-text{
						flex: 1;
					}
				}
			}
		}
		.app-content{
			padding-bottom: 24rpx;
			.home-image{
				width: 100%;
				height: 480rpx;
			}
			.content-nav{
				margin-top: -118rpx;
				display: flex;
				flex-direction: column;
				gap: 24rpx;
			}
			.nav-box{
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				.nav-title{
					font-weight: 600;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
				}
				.nav-list{
					margin-top: 32rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 32rpx 24rpx;
				}
				.nav-item{
					width: 152rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 16rpx;
				}
			}
		}
		.popup-box{
			width: 686rpx;
			padding: 32rpx;
			.popup-content{
				padding: 16rpx 48rpx 48rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 40rpx;
				font-weight: 600;
				font-size: var(--theme-lg);
				.icon{
					width: 260rpx;
					height: 196rpx;
					border-radius: 32rpx;
				}
			}
		}
	}
</style>